<script setup >
import {Chart} from "@antv/g2";

const data = [
  { year: '1991', value: 3 },
  { year: '1992', value: 4 },
  { year: '1993', value: 3.5 },
  { year: '1994', value: 5 },
  { year: '1995', value: 4.9 },
  { year: '1996', value: 6 },
  { year: '1997', value: 7 },
  { year: '1998', value: 9 },
  { year: '1999', value: 13 },
];

const initChart = () => {
  const chart = new Chart({
    container: "container",
    width: 400,
    height: 400,
    data : data,
    title : {
      title : '折线图',
      subtitle : '1991-1999年在增长率'
    },
    encode : {
      x : 'year',
      y : 'value',
      key : 'year',
      enterDuration : 1000
    },
    axis : {
      x : { labelFormatter : ( d ) => d },
      y : { labelFormatter : ( d ) => d + '%', },
    },
  });
  chart.line();
  chart.render();
  return chart;
}

onMounted(() => {
  initChart();
})
</script >

<template >
  <div id="container"></div>
</template >

<style scoped >

</style >